<template>
    <div
        class="static-table"
        :style="{
            '--border_color': border_color,
            '--hover_color': hover_row,
            '--row_padding': row_padding,
        }"
    >
        <!-- 表格头部 -->
        <div
            v-if="show_head"
            class="table-head"
            :style="{
                background: headBg,
                height: styleUtil.px2vh(headHeight),
                gridTemplateColumns: gridColumns,
            }"
        >
            <div
                v-for="(col, index) in columns"
                :key="index"
                :class="['head-grid', getTextAlign(col.text_align)]"
                :style="col.customHeadColStyle"
            >
                <div
                    v-if="col.isCustomHeadHtml"
                    :style="col.divStyle"
                    v-html="col.html"
                ></div>
                <div
                    v-else
                    v-text="col.label"
                    :style="{
                        color: col.headColor || '#ffffff',
                        fontSize: col.headSize
                            ? styleUtil.px2vw(col.headSize)
                            : styleUtil.px2vw(head_size),
                    }"
                ></div>
                <div
                    :class="[
                        'iconfont',
                        'fontsize14',
                        'w-text',
                        'pointer',
                        col.headIcon.iconCss ? col.headIcon.iconCss : '',
                    ]"
                    v-if="col.headIcon"
                    @click="onHeadCol(col)"
                ></div>
            </div>
        </div>
        <!-- 表格内容 -->
        <div
            v-if="list && list.length > 0"
            class="table-body swiper-container scroll_bar"
            @mouseover="() => $emit('mouseover')"
            @mouseleave="() => $emit('mouseout')"
            :style="{
                height: `calc(100% - ${styleUtil.px2vh(headHeight)})`,
                overflow,
            }"
        >
            <div class="swiper-wrapper">
                <!-- 1 渲染表格的 每一行 -->
                <div
                    v-for="(item, index) in list"
                    :key="index"
                    class="swiper-slide"
                    @click="onRow(item)"
                >
                    <div
                        class="swiper-grid pointer"
                        :style="{
                            backgroundColor: getRowColor(item, index),
                            gridTemplateColumns: gridColumns,
                            minHeight: r_height,
                        }"
                    >
                        <!-- 1.1 渲染某行的 每一列 -->
                        <div
                            v-for="(col, idx) in columns"
                            :class="[
                                'swiper-item',
                                getTextAlign(col.text_align),
                            ]"
                            :style="{
                                padding: col.isPadding ? col.isPadding.val : '',
                            }"
                            :key="idx"
                        >
                            <template>
                                <!-- 1.1.1 自定义卡槽 -->
                                <div
                                    v-if="col.isSlot"
                                    class="col_slot pointer full-screen flexrcc"
                                    :style="{
                                        width: col.isPadding
                                            ? styleUtil.px2vw(
                                                  col.isPadding.width
                                              )
                                            : '100%',
                                    }"
                                >
                                    <slot :name="col.prop" :row="item"></slot>
                                </div>
                                <!-- 1.1.2 自定义事件 -->
                                <div
                                    v-else-if="col.isClick"
                                    class="col_click pointer hidden"
                                    @click="onClick(item, col)"
                                >
                                    <el-tooltip
                                        v-if="col.row_hidden"
                                        class="item"
                                        effect="dark"
                                        :content="dealText(item, col.prop)"
                                        placement="top-end"
                                        :enterable="false"
                                    >
                                        <div class="flexrcc">
                                            <div
                                                :class="[
                                                    'row_hidden',
                                                    col.col_text
                                                        ? 'col_text'
                                                        : '',
                                                ]"
                                                :style="{
                                                    color:
                                                        col.textColor ||
                                                        '#ffffff',
                                                    fontSize: col.textSize
                                                        ? styleUtil.px2vw(
                                                              col.textSize
                                                          )
                                                        : styleUtil.px2vw(
                                                              content_size
                                                          ),
                                                }"
                                            >
                                                {{ dealText(item, col.prop) }}
                                            </div>
                                            <div
                                                v-if="col.isIcon"
                                                :class="[
                                                    'iconfont',
                                                    col.iconCss
                                                        ? col.iconCss.name
                                                        : 'icon-dingweixiao',
                                                ]"
                                                :style="{
                                                    color:
                                                        col.iconCss &&
                                                        col.iconCss.color
                                                            ? col.iconCss.color
                                                            : '#ffffff',
                                                }"
                                            ></div>
                                        </div>
                                    </el-tooltip>

                                    <template v-else>
                                        <div
                                            :style="{
                                                display: 'inline-block',
                                                color:
                                                    col.textColor || '#ffffff',
                                                fontSize: col.textSize
                                                    ? styleUtil.px2vw(
                                                          col.textSize
                                                      )
                                                    : styleUtil.px2vw(
                                                          content_size
                                                      ),
                                            }"
                                        >
                                            {{ dealText(item, col.prop) }}
                                        </div>
                                        <div
                                            v-if="col.isIcon"
                                            :class="[
                                                'iconfont',
                                                'inline-block',
                                                col.iconCss
                                                    ? col.iconCss.name
                                                    : 'icon-dingweixiao',
                                            ]"
                                            :style="{
                                                color:
                                                    col.iconCss &&
                                                    col.iconCss.color
                                                        ? col.iconCss.color
                                                        : '#ffffff',
                                            }"
                                        ></div>
                                    </template>
                                </div>

                                <!-- 1.1.3 自定义函数 -->
                                <div
                                    v-else-if="
                                        col.funName &&
                                        typeof col.funName === 'function'
                                    "
                                    class="col_funname pointer hidden"
                                >
                                    <div
                                        :style="{
                                            color: col.funColor || '#ffffff',
                                            fontSize: col.funSize
                                                ? styleUtil.px2vw(col.funSize)
                                                : styleUtil.px2vw(content_size),
                                        }"
                                    >
                                        {{ col.funName(item) }}
                                    </div>
                                    <el-tooltip
                                        v-if="col.row_hidden"
                                        class="item"
                                        effect="dark"
                                        :content="col.funName(item)"
                                        placement="top-end"
                                        :enterable="false"
                                    >
                                        <div
                                            :class="[
                                                'row_hidden',
                                                col.col_text ? 'col_text' : '',
                                            ]"
                                            :style="{
                                                color:
                                                    col.funColor || '#ffffff',
                                                fontSize: col.funSize
                                                    ? styleUtil.px2vw(
                                                          col.funSize
                                                      )
                                                    : styleUtil.px2vw(
                                                          content_size
                                                      ),
                                            }"
                                        >
                                            {{ col.funName(item) }}
                                        </div>
                                    </el-tooltip>
                                    <div
                                        v-else
                                        :style="{
                                            color: col.funColor || '#ffffff',
                                            fontSize: col.funSize
                                                ? styleUtil.px2vw(col.funSize)
                                                : styleUtil.px2vw(content_size),
                                        }"
                                    >
                                        {{ col.funName(item) }}
                                    </div>
                                </div>

                                <!-- 1.1.4 展开行的 按钮列-->
                                <div
                                    v-else-if="col.isExpand"
                                    class="col_expand pointer"
                                >
                                    <div
                                        :style="{
                                            color: col.expandColor || '#ffffff',
                                            fontSize: col.expandSize
                                                ? styleUtil.px2vw(
                                                      col.expandSize
                                                  )
                                                : styleUtil.px2vw(content_size),
                                        }"
                                    >
                                        <i
                                            class="el-icon-arrow-right"
                                            @click="onExpand(item, index)"
                                        ></i>
                                    </div>
                                </div>

                                <!-- 1.1.5 默认列-->
                                <div v-else class="col_default pointer hidden">
                                    <el-tooltip
                                        v-if="col.row_hidden"
                                        class="item"
                                        effect="dark"
                                        :content="dealText(item, col.prop)"
                                        placement="top-end"
                                        :enterable="false"
                                    >
                                        <div
                                            :class="[
                                                'row_hidden',
                                                col.col_text ? 'col_text' : '',
                                            ]"
                                            :style="{
                                                color:
                                                    col.defaultColor ||
                                                    '#ffffff',
                                                fontSize: col.defaultSize
                                                    ? styleUtil.px2vw(
                                                          col.defaultSize
                                                      )
                                                    : styleUtil.px2vw(
                                                          content_size
                                                      ),
                                            }"
                                        >
                                            {{ dealText(item, col.prop) }}
                                        </div>
                                    </el-tooltip>
                                    <div
                                        v-else
                                        :style="{
                                            color:
                                                col.defaultColor || '#ffffff',
                                            fontSize: col.defaultSize
                                                ? styleUtil.px2vw(
                                                      col.defaultSize
                                                  )
                                                : styleUtil.px2vw(content_size),
                                        }"
                                    >
                                        {{ dealText(item, col.prop) }}
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                    <!-- 展开的内容 -->
                    <!-- <div class="f99" v-show="item.expand == 1">
                        {{ 1234567 }}tmtm45346545646
                    </div> -->
                </div>
            </div>
        </div>
        <!-- 无数据 -->
        <div v-else class="empty">{{ empty_text }}</div>
    </div>
</template>

<script>
export default {
    name: "StaticTable",
    props: {
        columns: {
            // 渲染列名
            type: Array,
            default() {
                return [];
            },
        },
        // 是否展示表头
        show_head: {
            type: Boolean,
            default: true,
        },
        // 默认表头文字大小
        head_size: {
            // 渲染列名
            type: Number,
            default: 13,
        },
        // 默认内容文字大小
        content_size: {
            // 渲染列名
            type: Number,
            default: 13,
        },
        // 奇数背景色
        oddBg: {
            type: String,
            default: "",
        },
        // 偶数背景色
        evenBg: {
            type: String,
            default: "",
        },
        // 头部背景颜色
        headBg: {
            type: String,
            default:
                "linear-gradient(to bottom, rgba(17, 36, 47, 0.9), rgba(15, 39, 52, 0.6), rgba(14, 61, 75, 0.45), rgba(0, 240, 255, 0.22))",
        },
        headHeight: {
            type: [String, Number],
            default: "40",
        },
        dataList: {
            // 渲染数据
            type: Array,
            default() {
                return [];
            },
        },
        border_color: {
            type: String,
            default: "#075056",
        },
        hover_row: {
            type: String,
            default: "rgba(22, 159, 196, 0.25)",
        },
        is_select: {
            type: Boolean,
            default: false,
        },
        select_color: {
            type: String,
            default: "rgba(22, 159, 196, 0.25)",
        },
        overflow: {
            //是否显示scorllbar
            type: String,
            default: "",
        },
        row_padding: {
            type: String,
            default: "5px",
        },
        //行高
        rowHeight: {
            type: [String, Number],
            default: "",
        },
        // 数据为空
        empty_text: {
            type: String,
            default: "数据为空~",
        },
    },
    data() {
        return {
            cut_row_id: -1,
            cut_row_index: 0,
            r_height: "",
            list: [],
            // 展开
            expand: [
                {
                    index: 0,
                },
            ],
        };
    },
    computed: {
        getRowColor() {
            return (item, index) => {
                if (this.is_select) {
                    if (this.cut_row_id && this.cut_row_id == item.id) {
                        // is_select是true的情况下, 点击的当前行高亮
                        return this.select_color;
                    } else if (this.cut_row_id == -1 && index == 0) {
                        // is_select是true的情况下, 默认第一行高亮
                        return this.select_color;
                    } else {
                        return "";
                    }
                } else {
                    index % 2 !== 0 ? this.evenBg : this.oddBg;
                }
            };
        },
        gridColumns() {
            let arr = [];
            this.columns.forEach((item) => {
                if (item.width) {
                    arr.push(this.styleUtil.px2vw(item.width));
                } else {
                    arr.push("1fr");
                }
            });
            return arr.join(" ");
        },

        dealText() {
            return (item, prop) => {
                return item[prop];
            };
        },
        // 获取对齐方式
        getTextAlign() {
            return (a) => {
                if (a == "text_left") return "jstart";
                else if (a == "text_right") return "jend";
                else return "jcenter";
            };
        },
    },
    watch: {
        dataList: {
            handler(n, o) {
                this.list = [...this.dataList];
            },
            deep: true,
            immediate: true,
        },
        rowHeight: {
            handler(n, o) {
                this.r_height = this.styleUtil.px2vh(n);
            },
            deep: true,
            immediate: true,
        }


    },
    created() {
    },
    methods: {
        handelclick(type) {
            this.$emit("onTopology", type);
        },
        onClick(row, col) {
            this.$emit("onClick", row, col);
        },
        // 每一行 接受点击
        onRow(row) {
            this.cut_row_id = row.id || "";
            this.$emit("onRow", row);
        },
        // 点击head的某列
        onHeadCol(col) {
            this.$emit("onheadcol", col);
        },
        // 重置选中第一行
        resetRow(id) {
            this.cut_row_id = id
        },
        // //自定义单列样式
        // getCustomColStyle(col, idx) {
        //     let style = "";
        //     if (idx == 0 && col.customHeadColStyle) {
        //         style += col.customHeadColStyle;
        //         if (col.bg_color) style += col.bg_color;
        //     }
        //     return style;
        // },

        // 点击展开功能
        onExpand(item, index) {
        //     console.log(this.dataList);
        //     console.log(this.list);
            item.expand = 1;
        },
    },
};
</script>

<style scoped lang="scss">
.static-table {
    height: 100%;
    border-top: 1px solid var(--border_color);

    .table-head {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        height: vh(40);
        // padding: 0 vw(10);

        .head-grid {
            padding: 0 vw(10);
            display: inline-grid;
            height: inherit;
            // justify-content: center;
            // justify-items: center;
            align-items: center;
            grid-auto-flow: column;

            &:first-child {
                border-left: 1px solid var(--border_color);
            }

            &:last-child {
                border-right: 1px solid var(--border_color);
            }
        }
    }

    .swiper-container {
        height: calc(100% - vh(40));
        overflow-x: hidden;
        overflow-y: auto;

        .swiper-wrapper {
            display: block;
        }

        .swiper-slide {
            height: auto;

            .swiper-grid:hover {
                // background: url("~@/assets/images/proview/hover.png") no-repeat
                //     0 0;
                // background-size: 100% 100%;
                background-color: var(--hover_color); // 传入的背景颜色 暂时无效
            }

            .swiper-grid {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                min-height: vh(26);

                &:first-child {
                    // border-top: 1px solid var(--border_color);
                }
                &:before {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    height: 1px;
                    background: var(--border_color);
                }
                &:last-child {
                    border-bottom: 1px solid var(--border_color);
                    &:before {
                        content: unset;
                    }
                }

                .swiper-item {
                    // background-color: chartreuse;
                    display: inline-grid;
                    align-items: center;
                    position: relative;
                    padding: vh(5) vw(10);
                    line-height: 1.8;

                    &:first-child {
                        border-left: 1px solid var(--border_color);
                        color: #ffffff;
                    }
                    &:before {
                        content: "";
                        position: absolute;
                        bottom: 0;
                        top: 0;
                        right: 0;
                        width: 1px;
                        background: var(--border_color);
                    }
                    &:last-child {
                        border-right: 1px solid var(--border_color);
                        // width: vw(50);
                        // height: vw(25);
                        &:before {
                            content: unset;
                        }
                    }
                }
            }
        }
    }

    .iconfont {
        margin-left: vw(4);
    }
    // 文字横向溢出隐藏, 省略号代替
    .row_hidden {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
    }
    // 文字纵向展示
    .col_text {
        writing-mode: vertical-lr;
        -webkit-writing-mode: vertical-lr;
        -ms-writing-mode: vertical-lr;
    }
    // 暂无数据
    .empty {
        color: #fff;
        font-size: 20px;
        margin: 60px auto;
        text-align: center;
    }
}
</style>
